import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages'
import { mapMutations, mapGetters } from 'vuex'
import Vue from 'vue'
import merge from 'lodash/merge'
import { getUUID } from '@/utils'
import store from '@/store/modules/chartEdit'
let mixins = {
  computed: {
    ...mapGetters(['editCanvasConfig', 'componentList']),
  },
  methods: {
    ...mapMutations('chartEdit', ['addComponentList']),

    /**
 * * 组件-版本升级对旧数据无法兼容的补丁
 * @param newObject
 * @param sources
 */
    componentVersionUpdatePolyfill (newObject, sources) {
      try {
        // 判断是否是组件
        if (sources.id) {
          // 处理事件补丁
          const hasVnodeBeforeMount = 'vnodeBeforeMount' in sources.events
          const hasVnodeMounted = 'vnodeMounted' in sources.events

          if (hasVnodeBeforeMount) {
            newObject.events.advancedEvents.vnodeBeforeMount = sources?.events.vnodeBeforeMount
          }
          if (hasVnodeMounted) {
            newObject.events.advancedEvents.vnodeMounted = sources?.events.vnodeMounted
          }
          if (hasVnodeBeforeMount || hasVnodeMounted) {
            sources.events = {
              baseEvent: {
                click: undefined,
                dblclick: undefined,
                mouseenter: undefined,
                mouseleave: undefined
              },
              advancedEvents: {
                vnodeMounted: undefined,
                vnodeBeforeMount: undefined
              },
              interactEvents: []
            }
          }
          return newObject
        }
      } catch (error) {
        return newObject
      }
    },
    /**
 * * 合并处理
 * @param newObject 新的模板数据
 * @param sources 新拿到的数据
 * @returns object
 */
    componentMerge (newObject, sources, notComponent = false) {
      // 处理组件补丁
      this.componentVersionUpdatePolyfill(newObject, sources)

      // 非组件不处理
      if (notComponent) return merge(newObject, sources)
      // 组件排除 newObject
      const option = sources.option
      if (!option) return merge(newObject, sources)

      // 为 undefined 的 sources 来源对象属性将被跳过详见 https://www.lodashjs.com/docs/lodash.merge
      sources.option = undefined
      if (option) {
        return {
          ...merge(newObject, sources),
          option: option
        }
      }
    },
    /**
   * * 组件动态注册
   * @param projectData 项目数据
   * @param isReplace 是否替换数据
   * @returns
   */
    async updateComponent (projectData, isReplace = false, changeId = false) {
      if (isReplace) {
        // 清除列表
        store.state.componentList = []
      }

      // 列表组件注册
      projectData.componentList.forEach(async (e) => {
        const intComponent = (target) => {
          if (!Vue.component(target.chartConfig.chartKey)) {
            Vue.component(target.chartConfig.chartKey, fetchChartComponent(target.chartConfig))
            Vue.component(target.chartConfig.chartKey, fetchConfigComponent(target.chartConfig))
          }
        }
        intComponent(e)
      })

      // 创建函数-重新创建是为了处理类种方法消失的问题
      const create = async (_componentInstance, callBack) => {
        // 补充 class 上的方法
        let newComponent = await createComponent(_componentInstance.chartConfig)
        if (_componentInstance.chartConfig.redirectComponent) {
          _componentInstance.chartConfig.dataset && (newComponent.option.dataset = _componentInstance.chartConfig.dataset)
          newComponent.chartConfig.title = _componentInstance.chartConfig.title
          newComponent.chartConfig.chartFrame = _componentInstance.chartConfig.chartFrame
        }
        if (callBack) {
          if (changeId) {
            callBack(this.componentMerge(newComponent, { ..._componentInstance, id: getUUID() }))
          } else {
            callBack(this.componentMerge(newComponent, _componentInstance))
          }
        } else {
          if (changeId) {
            this.addComponentList(
              {
                componentInstance: this.componentMerge(newComponent, { ..._componentInstance, id: getUUID() }),
                isHead: false,
                isHistory: true
              }
            )
          } else {
            this.addComponentList({ componentInstance: this.componentMerge(newComponent, _componentInstance), isHead: false, isHistory: true })
          }
        }
      }

      // 数据赋值
      for (const key in projectData) {
        // 组件
        if (key === 'componentList') {
          let loadIndex = 0
          const listLength = projectData[key].length
          for (const comItem of projectData[key]) {
            // 设置加载数量
            let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
            // chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
            // 判断类型
            if (comItem.isGroup) {
              // 创建分组
              // let groupClass = new PublicGroupConfigClass()
              // if (changeId) {
              //   groupClass = this.componentMerge(groupClass, { ...comItem, id: getUUID() })
              // } else {
              //   groupClass = this.componentMerge(groupClass, comItem)
              // }

              // 异步注册子应用
              const targetList = []
              for (const groupItem of (comItem).groupList) {
                await create(groupItem, e => {
                  targetList.push(e)
                })
              }
              // groupClass.groupList = targetList

              // 分组插入到列表
              // this.addComponentList({componentInstance:groupClass, isHead:false, isHistory:true})
            } else {
              await create(comItem)
            }
            // if (percentage === 100) {
            //   // 清除历史记录
            //   chartHistoryStore.clearBackStack()
            //   chartHistoryStore.clearForwardStack()
            // }
          }
        } else if (key === 'editCanvasConfig' || key === 'requestGlobalConfig') {
          this.componentMerge(this[key], projectData[key], true)
        }
      }

      // 清除数量
      // chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, 0)
    }
  },
}
export default mixins